<template>
	<view class="flex-col page">
		<view class="flex-col group_5">
			<view class="flex-col group_6">
				<view class="flex-col">
					<detailbanner :banner="thumbs"></detailbanner>
					<view class="justify-end group_8">
						<image
							src="http://images.wanjunshijie.com/product/cook/assets/467c13be7e21b0c922c91d6e9306632b.png"
							class="image_7" />
						<text class="text_6">请提前48小时预约厨师上门服务</text>
						<view class="flex-col text-wrapper">
							<text class="text_7">可服务时间</text>
						</view>
					</view>
				</view>
				<view class="flex-row group_9">
					<text class="text_8">擅</text>
					<text class="text_9">长：</text>
					<view class="section_1 flex-col view" v-for="(item,index) in data.menus" :key="index">
						<view class="section_2"> </view>
						<text class="text_10">{{item}}</text>
					</view>
				</view>
				<view class="justify-between group_10">
					<view class="flex-col">
						<view class="flex-row">
							<text class="text_12">履</text>
							<text class="text_13">历：</text>
							<text class="text_14">{{data.resume}}</text>
						</view>
						<view class="flex-row group_13">
							<text class="text_15">常驻地址：</text>
							<text class="text_16">{{data.address}}</text>
						</view>
					</view>
					<view @click="gosubscribe" class="flex-col items-center text-wrapper_1">
						<text>预约</text>
					</view>
				</view>
			</view>
			<view class="flex-col section_3">
				<text class="text_18">免责声明：</text>
				<view class="flex-col group_14">
					<view class="group_15">
						<text>1.资料中关于厨师的个人形象、健康证件、工作履历等均未厨师本<br /></text>
						<text>人提供，如有疑问，您可与其核实。</text>
					</view>
					<view class="group_16">
						<text>2.用户未通过平台与厨师进行的交易不属于厨师到家上门服务交易，<br /></text>
						<text>平台不承担任何责任。</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import configs from '@/config/config.js'
	import detailbanner from '../../components/detailbanner.vue'
	import {
		cookdetail
	} from '../../config/api.js'
	export default {
		components: {
			detailbanner
		},
		data() {
			return {
				id: 0,
				configs,
				thumbs: [],
				data: {
					address: "",
					id: 13,
					menus: [],
					phone: "",
					realname: "",
					resume: "",
					status: 1,
					thumbs: "",

				}
			};
		},
		onLoad(e) {
			this.id = e.id
			this.getdata()
		},
		methods: {
			gosubscribe() {
				uni.navigateTo({
					url: '/pages/cook/subscribe'
				})
			},
			getdata() {
				var that = this;
				cookdetail({
					userId: that.id
				}, {
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.code == 1) {
						that.data = res.data
						var data = res.data.thumbs.split(",")
						that.thumbs = []
						data.forEach((type) => {
							that.thumbs.push(configs.baseUrl + type)
						});
						console.log(that.thumbs)
					}
				}).catch(err => {

				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: rgb(255, 255, 255);
		width: 100%;
		height: 100%;
		overflow-y: auto;

		.group_5 {
			flex: 1 1 auto;
			overflow-y: auto;

			.group_6 {
				padding: 52rpx 22rpx 32rpx 24rpx;

				.group_9 {
					margin-top: 68rpx;

					.text_8 {
						margin: 8rpx 0 9rpx;
						color: rgb(0, 0, 0);
						font-size: 26rpx;
						line-height: 24rpx;
						white-space: nowrap;
					}

					.text_9 {
						margin: 8rpx 0 9rpx 17rpx;
						color: rgb(0, 0, 0);
						font-size: 26rpx;
						line-height: 24rpx;
						white-space: nowrap;
					}

					.section_1 {
						color: rgb(140, 63, 0);
						font-size: 24rpx;
						line-height: 24rpx;
						white-space: nowrap;
						background-color: rgba(249, 182, 2, 0.3);
						border-radius: 10rpx;
						width: 95rpx;
						height: 41rpx;
						position: relative;

						.section_2 {
							opacity: 0.5;
							border-radius: 10rpx;
							height: 41rpx;
							border: solid 2rpx rgb(249, 182, 2);
						}

						.text_10 {
							position: absolute;
							left: 24rpx;
							top: 50%;
							transform: translateY(-50%);
						}

						.text_11 {
							position: absolute;
							left: 25rpx;
							top: 50%;
							transform: translateY(-50%);
						}
					}

					.view {
						margin-left: 9rpx;
					}

					.view_2 {
						margin-left: 13rpx;
					}
				}

				.group_10 {
					margin-top: 50rpx;

					.text-wrapper_1 {
						margin-top: 11rpx;
						padding: 17rpx 0 16rpx;
						color: rgb(250, 250, 250);
						font-size: 30rpx;
						line-height: 28rpx;
						white-space: nowrap;
						background-color: rgb(56, 148, 255);
						border-radius: 31rpx;
						width: 158rpx;
						height: 61rpx;
					}

					.group_13 {
						margin-top: 24rpx;

						.text_15 {
							color: rgb(0, 0, 0);
							font-size: 24rpx;
							line-height: 24rpx;
							white-space: nowrap;
						}

						.text_16 {
							margin-left: 16rpx;
							color: rgb(23, 23, 23);
							font-size: 24rpx;
							line-height: 24rpx;
							white-space: nowrap;
						}
					}

					.text_12 {
						color: rgb(0, 0, 0);
						font-size: 24rpx;
						line-height: 24rpx;
						white-space: nowrap;
					}

					.text_13 {
						margin-left: 21rpx;
						color: rgb(0, 0, 0);
						font-size: 24rpx;
						line-height: 24rpx;
						white-space: nowrap;
					}

					.text_14 {
						margin-left: 14rpx;
						color: rgb(23, 23, 23);
						font-size: 24rpx;
						line-height: 24rpx;
						white-space: nowrap;
					}
				}

				.image-wrapper {
					padding: 394rpx 0 18rpx;
					border-radius: 10rpx;
					background-image: url('http://images.wanjunshijie.com/product/cook/assets/c09ba317e2e46240ac4a707ecff7512f.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;

					.image_6 {
						width: 49rpx;
						height: 4rpx;
					}
				}

				.group_8 {
					padding-top: 20rpx;

					.image_7 {
						margin-right: 9rpx;
						align-self: center;
						width: 27rpx;
						height: 25rpx;
					}

					.text_6 {
						margin-right: 27rpx;
						align-self: center;
						color: rgb(172, 170, 170);
						font-size: 24rpx;
						line-height: 24rpx;
						white-space: nowrap;
					}

					.text-wrapper {
						padding: 10rpx 0 9rpx;
						color: rgb(56, 148, 255);
						font-size: 24rpx;
						line-height: 24rpx;
						white-space: nowrap;
						border-radius: 10rpx;
						height: 47rpx;
						border: solid 2rpx rgb(56, 148, 255);

						.text_7 {
							margin-left: 9rpx;
						}
					}
				}
			}

			.section_3 {
				padding: 35rpx 0 162rpx 23rpx;
				background-color: rgb(242, 242, 242);

				.text_18 {
					color: rgb(172, 170, 170);
					font-size: 28rpx;
					line-height: 27rpx;
					white-space: nowrap;
				}

				.group_14 {
					margin-top: 32rpx;
					color: rgb(172, 170, 170);
					font-size: 24rpx;
					line-height: 40rpx;

					.group_15 {
						margin-right: 23rpx;
					}

					.group_16 {
						margin-top: 15rpx;
					}
				}
			}
		}
	}
</style>
